<template>
  <div class="time-main">
    <div class="time-list" v-init-screen-h>
      <el-row :gutter="20">
        <el-col
          :xs="12"
          :sm="6"
          :md="6"
          :lg="4"
          :xl="4"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <TimeTask :item="item" @click="handleItem(item)"></TimeTask>
        </el-col>
      </el-row>
    </div>
    <Pagination
      @pagination="pagination"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      :pageSizes.sync="pageSizes"
    />
    <TimeDialog :dialogVisible.sync="dialogVisible"></TimeDialog>
  </div>
</template>

<script>
import Pagination from "@/views/common/page";
import TimeTask from "@/components/TimeTask";
import TimeDialog from "./components/TimeDialog.vue";
export default {
  components: { TimeDialog, Pagination, TimeTask },
  data() {
    return {
      dialogVisible: false,
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      dataList: [
        {
          t1: "1",
          t2: "202109001",
          t3: "4h30min",
          t4: "1h30min",
          percent: 30,
          t5: "1",
        },
        {
          t1: "2",
          t2: "202109002",
          t3: "4h30min",
          t4: "1h30min",
          percent: 50.56,
          t5: "3",
        },
        {
          t1: "3",
          t2: "202109003",
          t3: "4h30min",
          t4: "1h30min",
          percent: 92,
          t5: "2",
        },
        {
          t1: "4",
          t2: "202109004",
          t3: "4h30min",
          t4: "1h30min",
          percent: 29,
          t5: "5",
        },
        {
          t1: "5",
          t2: "202109004",
          t3: "4h30min",
          t4: "1h30min",
          percent: 50,
          t5: "3",
        },
        {
          t1: "6",
          t2: "202109004",
          t3: "4h30min",
          t4: "1h30min",
          percent: 98,
          t5: "4",
        },
        {
          t1: "7",
          t2: "202109007",
          t3: "4h30min",
          t4: "1h30min",
          percent: 77.77,
          t5: "1",
        },
        {
          t1: "8",
          t2: "202109008",
          t3: "4h30min",
          t4: "1h30min",
          percent: 95.66,
          t5: "1",
        },
        {
          t1: "9",
          t2: "202109009",
          t3: "4h30min",
          t4: "1h30min",
          percent: 66.66,
          t5: "2",
        },
        {
          t1: "10",
          t2: "2021090010",
          t3: "4h30min",
          t4: "1h30min",
          percent: 44,
          t5: "4",
        },
        {
          t1: "11",
          t2: "2021090011",
          t3: "4h30min",
          t4: "1h30min",
          percent: 80.99,
          t5: "5",
        },
        {
          t1: "12",
          t2: "2021090012",
          t3: "4h30min",
          t4: "1h30min",
          percent: 65.55,
          t5: "1",
        },
      ],
    };
  },
  mounted() {
    this.total = this.dataList.length;
  },
  methods: {
    handleItem(item) {
      this.dialogVisible = true;
    },
    formatStatus(data) {
      if (data == "1") {
        return "待执行";
      } else if (data == "2") {
        return "过程中";
      } else if (data == "3") {
        return "完成";
      }
    },
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
    },
    formatProgress(data) {
      if (data > 90) {
        return "exception";
      } else {
        return "success";
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.time-list {
  width: 100%;
  padding: 0 20px 20px 20px;
  overflow-y: auto;
}
</style>